<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style>
        div {
            width: 300px;
            height:300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div onmouseover="overfn()" onmouseout="outfn()" onmousedown="downfn()" onmouseup="upfn()" onmousemove="movefn()"></div>
    <br>
    <br>
    <br>
    <input id="text" type="text" onkeydown="kdfn()" onkeyup="kufn()" onblur="blurfn()">
    <br>
    <br>
    <br>
    <select id="s1" onchange="changefn()">
        <option>厦门</option>
        <option>福州</option>
        <option>宁波</option>
    </select>
    <h1>h1</h1>
    <script>
        function overfn() {
            console.log("鼠标移入");
        }
        function outfn() {
            console.log("鼠标移出");
        }
        function downfn() {
            console.log("鼠标按下");
        }
        function upfn() {
            console.log("鼠标抬起");
        }

        function movefn() {
            console.log("鼠标移动");
        }
        function kdfn() {
            console.log("键盘按下:"+event.keyCode);
        }
        function kufn() {
            console.log("键盘抬起"+String.fromCharCode(event.keyCode));
        }
        function blurfn() {
            alert("失去焦点");
        }
        function changefn() {
            let s1 = document.querySelector("#s1");
            let h1 = document.querySelector("h1");

            h1.innerText = s1.value;
        }
    </script>
</body>
</html>